<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增 filter')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-filter-add" class="form-horizontal">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red;">* </span>filter：</label>

                    <div class="col-sm-9">
                        <select id="filter-name" class="form-control">
                            <option value="StripPrefix">StripPrefix</option>
                            <option value="MyCustom">MyCustom</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group filter-args">
                    <label class="col-sm-2 control-label"><span style="color: red;">* </span>parts：</label>
                    <div class="col-sm-9">
                        <input name="parts" class="form-control" type="number" value="0" min="0" step="1" maxlength="1" required/>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script type="application/javascript">

    $(function () {
        $('#filter-name').change(function () {
            var name = $('#filter-name').val();
            var html =
                '<label class="col-sm-2 control-label"><span style="color: red;">* </span>parts：</label>' +
                '<div class="col-sm-9">' +
                    '<input name="parts" class="form-control" type="number" value="0" step="1" maxlength="5" required/>' +
                '</div>';

            $('.filter-args:eq(0)').empty();
            $('.row:eq(2)').empty();

            switch (name) {
                case 'StripPrefix':
                    $('.filter-args:eq(0)').append(html);
                    break;

                case 'MyCustom':
                    // GET, POST
                    html =
                        '<label class="col-sm-2 control-label"><span style="color: red;">* </span>method：</label>' +
                        '<div class="col-sm-9">' +
                            '<select id="method" class="form-control" required>' +
                                '<option value="POST">POST</option>' +
                                '<option value="GET">GET</option>' +
                            '</select>' +
                        '</div>';
                    $('.filter-args:eq(0)').append(html);
                    $('#method').select2({});
                    break;

                default:
                    break;
            }
        });

    });

</script>
</body>
</html>
